<template>
  <div>
    <div>
      <el-button>添加工资</el-button>
      <el-button>刷新</el-button>
    </div>
    <div>
      <el-table :data="salaries">
        <el-table-column type="selection">
          <el-table-column prop="name" label="名字">
              <el-input></el-input>
               </el-table-column>
          <el-table-column prop="name" label="名字"> </el-table-column>
          <el-table-column prop="name" label="名字"> </el-table-column>
          <el-table-column prop="name" label="名字"> </el-table-column>
        </el-table-column>
      </el-table>
      <el-input v-model="salary[title]"  :placeholder="'请输入'+slaryItemName[index]+'...'" v-for="(value,title,index) in salary" :key="index"
      v-show="activeItemIndex == indx" style="width: 200px">

      </el-input>
      <span slot="footer">
          <el-button @click="preStep">{{activeItemIndex == 10?'取消':'上一步'}}</el-button>
          <el-button @click="nextStep">{{avtiveItemIndex == 10?'完成':'下一步'}}</el-button>
      <template slot-scope="scope">
          <div>
              <el-button @click="deleteSalary(scope.row)">删除</el-button>
              <el-button>编辑</el-button>
          </div>
          <template slot-scope="scope"
            
          >
              <el-popover
              @show="showPop(scope.row.salary)"
            @hide="hidePop(scope.row)">
                  <div>
              <el-select v-model="currentSalary" >
                  <el-option
                    v-for="item in slalaries"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >

                  </el-option>
              </el-select>
          </div>
              </el-popover>
          </template>
          
          <div>
              <el-button slot="reference">修改工资账套</el-button>
          </div>
      </template>
      
      </span>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            salary:{
                name:'',
                basicSalary:0,
                bonus:0
            },
            currentSalary:null
        }
    },
    methods:{
        hidePop(data){
            //url /后面不带花括号
            if(this.currentSalary && this.currentSalary !=data.salary.id){
                this.putRequest('url/?=eid'+data.id +'&sid='+this.currentSalary).then(resp=>{
                if(resp){
                    this.initEmps()
                }
            })
            }
            
        },
        showPop(data){
            if(data){

            this.currentSalary = data.id
            
        }else{
            this.currentSalary =null
        }
        },
        initSalaries(){

        },
        nextStep(){
            if(this.activeItemIndex == 10){
                alert("ok") 
                return
            }
            this.activeItemIndex ++
        },
        preStep(){

        },
        showAddSalaryView(){
            this.salary = {
                name:'',
                basicSalary:0,
                bonus:0
            }
        },
        deleteSalary(data){

        },
        showEditSalary(data){

        }
    }
};
</script>

<style>
</style>this.putRequest('url/?=eid'+data.id +'&sid='+this.currentSalary).then(resp=>{
                if(resp){
                    this.initEmps()
                }
            })